<template>
  <div class="content">
    <!-- 信息 -->
    <el-collapse v-model="active">
      <el-collapse-item name="1" title="基础信息">
        <div class="main">
          <el-row>
            <el-col :span="6">
              <div class="info">
                <div>货主编号</div>
                <div>{{ info.code }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info">
                <div>货主名称</div>
                <div>{{ info.name }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info">
                <div>联系人</div>
                <div>{{ info.personName }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info">
                <div>联系人电话</div>
                <div>{{ info.phone }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="info">
                <div>联系人邮箱</div>
                <div>{{ info.email }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info">
                <div>省/市/区</div>
                <div>{{ info.location }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info">
                <div>详细地址</div>
                <div>{{ info.address }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="info">
                <div>备注</div>
                <div>{{ info.remark }}</div>
              </div>
            </el-col>

          </el-row>
        </div>
      </el-collapse-item>
      <!-- 表格 -->
      <el-collapse-item title="库位信息">
        <div class="top">
          总计：{{ 2 }}个库位 {{ 0 }}个 货品
        </div>
        <MyTable :table-data="locationList" :table-col="tableCol" :edit="false" :current="current" :size="size" />
        <MyPage :total-page="totalPage" @changeSize="changeSize" @changeCurrent="changeCurrent" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { owneDetail, ownerLocation } from '@/api'
import MyTable from '@/components/MyTable'
import MyPage from '@/components/MyPage'
export default {
  components: { MyTable, MyPage },
  data() {
    return {
      active: ['1'],
      info: {},
      locationList: [],
      tableCol: [
        { prop: 'warehouseName', label: '仓库名称' },
        { prop: 'areaName', label: '库区名称' },
        { prop: 'locationCode', label: '库位编号' },
        { prop: 'locationName', label: '库位名称' }
      ],
      totalPage: null,
      size: 10,
      current: 1
    }
  },
  async created() {
    console.log(this.$route.params.id)
    const res = await owneDetail(this.$route.params.id)
    // console.log(res)
    await this.apiFn(this.size, this.current)
    this.info = res.data.data
    // console.log(res1)
  },
  methods: {
    // 改变页数
    async changeSize(val) {
      this.size = val
      await this.apiFn(this.size, this.current)
    },
    async changeCurrent(val) {
      this.current = val
      await this.apiFn(this.size, this.current)
    },
    // 表格数据
    async apiFn(size, current) {
      const res1 = await ownerLocation({
        ownerId: this.$route.params.id,
        size,
        current })
      this.locationList = res1.data.data.records
      this.totalPage = Number(res1.data.data.total)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-collapse-item {
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  margin-bottom: 25px;
  padding: 14px 27px 15px;

  .main {
    margin-top: 15px;
    background: #fdfcf9;
    border: 1px solid #f7f2f1;
    padding: 25px 30px;

    .info {
      div {
        color: #887e7e;

        &:first-child {
          color: #332929;
        }
      }
    }
  }
  .top{
    display: inline-block;
    height: 32px;
    line-height: 30px;
    background: #fff9eb;
    border: 1px solid #ffb200;
    padding: 0 25px;
    margin: 20px 0;
  }
}
.el-col{
  padding-top: 20px;
}
::v-deep .el-collapse-item__header.is-active::after {
    content: "收起";
}
::v-deep .el-collapse-item__header::after {
    content: "展开";
}
</style>
